<template>
    <div class="header">
        <!-- 头部左侧 -->
        <div class="left">
            <slot name="left"><p @click="$router.back()">&lt;</p></slot>
        </div>
        <!-- 头部标题 -->
        <div class="title">
            <slot></slot>
        </div>
        <!-- 头部右侧 -->
        <div class="right">
            <slot name="right"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "pageHeaderCom",
};
</script>

<style lang="scss" scoped>
.header {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 2.667vw 3.733vw;
    height: 17.067vw;
    font-size: 4.267vw;
    font-weight: 700;
    background-color: #eae9e5;

    .left {
        width: 13.333vw;
        color: #c1ab96;
    }
    .right {
        width: 13.333vw;
        padding-bottom: 0.8vw;
        font-size: 3.2vw;
        font-weight: 400;
        text-align: center;
    }
}
</style>